<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<body>

<div th:fragment="navTools">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/liujun0128/blog@master/static/css/navTool.css">
    <div class="leftNav-item">
        <ul>
            <li lay-data="img" data-fooc="https://cdn.jsdelivr.net/gh/liujun0128/blog@master/static/image/blog/contact.jpg">
                <i class="myIcon" style="font-size: 28px;">&#xe621;</i>
                <a href="javascript:void(0)" class="rota">建立关系</a>
            </li>
            <li lay-data="img" data-fooc="https://cdn.jsdelivr.net/gh/liujun0128/blog@master/static/image/blog/reward.jpg">
                <i class="myIcon" style="font-size: 28px;">&#xe61a;</i>
                <a href="javascript:;" class="rota">小额打赏</a>
            </li>
            <li title="返回顶部" class="for-top">
                <i class="myIcon" style="font-size: 28px;">&#xe66c;</i>
                <a href="javascript:;" class="rota">去顶部</a>
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        function setlayer(alias, str, icon) {
            var html = "";
            if (alias == "text") {
                html += "<div class=\"text-item\">";
                html += "<span>";
                html += "<i class=\"" + icon + "\"></i>" + str + "</span>";
                html += "</div>";
            } else {
                html += "<div class=\"img-item\">";
                html += "<img src=\"" + str + "\">";
                html += "</div>";
            }
            return html;
        }

        $(function () {
            $(".leftNav-item li").hover(function (e) {
                var alias = $(this).attr("lay-data");
                var str = $(this).attr("data-fooc");
                var icon = $(this).children("i").attr("class");
                if (!alias) {
                    return false;
                }
                $(this).append(setlayer(alias, str, icon));
                $(this).children("div").show(300);
            }, function (e) {
                $(this).children("div").remove();
            });
            $(window).scroll(function () {
                var scrollTop = $(document).scrollTop();
                if (scrollTop >= 200) {
                    $(".for-top").show();
                } else {
                    $(".for-top").hide();
                }
            });
            $(".for-top").click(function () {
                $('html,body').animate({
                    scrollTop: 0
                }, 700);
            })
        })
    </script>
</div>
</body>
</html>